<template>
    <!--侧滑菜单部分-->
  <aside class="mui-off-canvas-left" style="background-color: #3A4759">
    <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <div class="title"></div>
        <div class="content">
          <div class="u-info">
            <div class="head-img">
              <img src="../../images/head.jpg">
            </div>
            <div class="head-detail">
              <p>Daniel</p>
              <p>
                <i class="icon-gou iconfont"></i>
                签到
              </p>
            </div>
          </div>
        </div>
        <div>
          <ul class="side-view">
            <li class="side-item">
              <a href="javascript:;">
                <i class="mui-pull-left icon-message iconfont"></i>
                <div class="mui-pull-left">
                  消息
                </div>
              </a>
            </li>
            <li class="side-item">
              <a href="javascript:;">
                <i class="mui-pull-left icon-phone iconfont"></i>
                <div class="mui-pull-left">
                  客服
                </div>
              </a>
            </li>
            <li class="side-item">
              <a href="javascript:;">
                <i class="mui-pull-left icon-PAY_WALLET iconfont"></i>
                <div class="mui-pull-left">
                  钱包
                </div>
              </a>
            </li>
            <li class="side-item">
              <a href="javascript:;">
                <i class="mui-pull-left icon-tripshezhishi iconfont"></i>
                <div class="mui-pull-left">
                  设置
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="side-bottom">
        <div class="side-bottom-item">
          <i class="mui-pull-left iconfont icon-jisuanqi"></i>
          <p class="mui-pull-left">计算器</p>
        </div>
        <div class="side-bottom-item">
          <i class="mui-pull-left iconfont icon-fujin"></i>
          <p class="mui-pull-left">附近</p>
        </div>
        <div class="side-bottom-item">
          <i class="mui-pull-left iconfont icon-shangdian"></i>
          <p class="mui-pull-left">商店</p>
        </div>
      </div>
    </div>
  </aside>
</template>

<script>
  import { Toast } from 'mint-ui';
  import {login} from '../../service/getData'
  import {getStore, setStore, removeStore} from '../../config/mUtils'
  import loading from '../../components/common/loading'

  export default {
    data(){
      return{

      }
    },

    mounted(){

    },
    watch:{

    }
    ,
    components:{
      loading
    },

    computed:{

    },

    methods:{

    }
  }

</script>

<style lang="less" scoped>
  .content{
    top: 2rem;
    position: relative;
  }
  .u-info{
    display: flex;
    padding: .5rem .8rem;
    .head-img{
      flex:1;
      border-radius: 50%;
      width: 3rem;
      height: 3rem;
      box-shadow: 0 0 0.2rem #545252;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .head-detail{
      flex:2;
      color: #fff;
      padding-left: .65rem;
      padding-top: .8rem;
      p:nth-child(1){
        font-size: .85rem;
        font-weight: 400;
      }
      p{
        color: #fff;
      }
    }
  }
.side-view{
  top: 2rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  .side-item{
    position: relative;
    overflow: hidden;
    padding: .7rem .9rem;
    width: 100%;
    i{
      color: #fff;
      font-size: 1.3rem;
      position: relative;
      top: -.1rem;
    }
    div{
      color: #fff;
      font-size: .8rem;
      margin-left: .6rem;
    }
  }
  .side-item:active{
    background-color: #2b394b;
  }
}
  .side-bottom{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .7rem .9rem;
    display: flex;
    .side-bottom-item{
      flex:1;
      i{
        color: #fff;
        position: relative;
        top: -.1rem;
      }
      p{
        color: #fff;
        font-size: .5rem;
        margin-left: .2rem;
      }
    }
  }
</style>
